<template>
  <div>
    <el-form :inline="true" :model="formInline"
             style="margin-bottom: 5px;"
             class="demo-form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="formInline.userName" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="formInline.phonenumber" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="mini" @click="toSaveUserRole" plain>添加用户</el-button>
    <el-button type="danger" size="mini" @click="batchRemoveUserRole" plain>批量取消授权</el-button>
    <el-button type="warning" size="mini" @click="toRole" style="margin-right: 700px;" plain>关闭</el-button>

<!--    列表-->
    <div style="margin-top: 25px;"
        align="center">
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="用户昵称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phonenumber"
          label="手机"
          width="120">
      </el-table-column>
      <el-table-column
          label="状态"
          width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" v-show="scope.row.status==0">正常</el-button>
          <el-button type="danger" size="mini" v-show="scope.row.status==1">停用</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="180"
          show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
          width="120"
        label="操作">
        <template slot-scope="scope">
        <el-button type="text" size="mini" @click="DelUserRole(scope.row.userId)">取消授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

<!--    给用户授权/添加-->
    <el-dialog title="选择用户" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="formInline2"
               style="margin-bottom: 5px;"
               class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="formInline2.userName" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formInline2.phonenumber" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getOtherUserList">查询</el-button>
        </el-form-item>
      </el-form>
<!--        待选择用户列表-->
        <el-table
            ref="multipleTable"
            :data="tableData2"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange2">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="用户姓名"
              width="120">
          </el-table-column>
          <el-table-column
              prop="nickName"
              label="用户昵称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱"
              width="120">
          </el-table-column>
          <el-table-column
              prop="phonenumber"
              label="手机"
              width="120">
          </el-table-column>
          <el-table-column
              label="状态"
              width="120">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" v-show="scope.row.status==0">正常</el-button>
              <el-button type="danger" size="mini" v-show="scope.row.status==1">停用</el-button>
            </template>
          </el-table-column>
          <el-table-column
              label="创建时间"
              width="180"
              show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
        </el-table>
      <el-pagination
          background
          @current-change="toNewPage2"
          :current-page="formInline2.pageNum"
          :page-size="formInline2.pageSize"
          layout="prev, pager, next"
          :total="total2">
      </el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchSaveUserRole">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
        background
        @current-change="toNewPage"
        :current-page="formInline.pageNum"
        :page-size="formInline.pageSize"
        layout="prev, pager, next"
        :total="total1">
    </el-pagination>
  </div>
</template>

<script>

export default {
  name: 'DistUserView',
  data(){
    return{
      dialogFormVisible:false,
      tableData:[],
      tableData2:[],
      multipleSelection:[],
      multipleSelection2:[],
      roleId:null,
      formInline:{
        pageNum:1,
        pageSize: 3,
        haveId:null,
      },
      formInline2:{
        pageNum:1,
        pageSize: 3,
        haveId:null,
      },
      saveForm:{

      },
      total1:0,
      total2:0,
    }
  },
  methods:{
    toNewPage2(newPage){
      this.formInline2.pageNum=newPage;
      this.getOtherUserList();
    },
    toNewPage(newPage){
      this.formInline.pageNum=newPage;
      this.onSubmit();
    },
    toSaveUserRole(){
      this.formInline2={

      };
      this.getOtherUserList();
      this.dialogFormVisible=true;
    },
    //批量取消授权
    batchRemoveUserRole(){
      var vv= [];
      this.multipleSelection.map(r=>{
        vv.push(r.userId)
      });
      this.saveForm.haveIds=vv;
      this.saveForm.haveId=this.roleId;
      this.axios.post("http://localhost:8181/role/bathDelUserRole",this.saveForm).then(()=>{
        this.$message.success("成功取消授权");
        window.setTimeout(function (){
          window.location.reload();
        },300)

      })
    },
    //关闭页面
    toRole(){
      this.$router.push("role");
    },
    //取消授权
    DelUserRole(id){
      this.saveForm.userId=id;
      this.saveForm.roleId=this.roleId;
      this.axios.post("http://localhost:8181/role/DelUserRole",this.saveForm).then(()=>{
        this.$message.success("成功取消授权");
        window.setTimeout(function (){
          window.location.reload();
        },300)

      })
    },
    onSubmit(){
      this.getUserByRoleId(this.roleId);
    },
    //已选择用户（可取消授权用户）
    getUserByRoleId(id){
      if(id!=null) {
        this.formInline.haveId=id;
        this.axios.post("http://localhost:8181/role/getUserByRoleId",this.formInline).then(r=>{
          console.log(r.data.data);
          this.tableData=r.data.data.list;
          this.total1=r.data.data.total;
        })
        this.formInline.pageNum=1;
      }
    },
    //未选择用户
    getOtherUserList(){
      if(this.roleId!=null) {
        this.formInline2.haveId=this.roleId;
        this.axios.post("http://localhost:8181/role/getUserListByRoleId",this.formInline2).then(r=>{
          this.tableData2=r.data.data.list;
          this.total2=r.data.data.total;
        })
        this.formInline2.pageNum=1;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    batchSaveUserRole(){
      var vv=[]
      this.multipleSelection2.map(r=>{
        vv.push(r.userId);
      })
      this.saveForm.haveId = this.roleId;
      this.saveForm.haveIds = vv;
      this.axios.post("http://localhost:8181/role/batchSaveUserRole",this.saveForm).then(r=>{
        if (r.data.code==200){
          this.$message.success("添加授权成功");
        }else {
          this.$message.error(r.data.msg);
        }
        this.dialogFormVisible=false;
        window.setTimeout(function (){
          window.location.reload();
        },300)

      })
    },
  },
  created() {
    var search = location.search;
    let vv = search.split("=");
    this.roleId=vv[1];
    this.getUserByRoleId(this.roleId);
}
}
</script>
